<!--  -->
<template>
  <div>
    <li></li>
    <p>疫情地图</p>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="国内疫情" name="first" :lazy="true">
        <div id="chinamap"></div>
      </el-tab-pane>
      <el-tab-pane label="国外疫情" name="second">
        <div id="worldmap"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import mockapi from "../../api/mock";
import api from "../../api/index";
export default {
  name: "",
  data() {
    return {
      activeName: "first",
    };
  },
  mounted() {
    /*mockapi
      .getCity({})
      .then((res) => {
        let Alldata = [];
        console.log(res.data);
        for (let i = 0; i < res.data.data[0].data.length; i++) {
          let temp = {
            name: res.data.data[0].data[i].name,
            value:
              res.data.data[0].data[i].present > 0
                ? res.data.data[0].data[i].present
                : 0,
          };
          Alldata.push(temp);
        }
        this.$charts.chinaMap("chinamap", Alldata);
        this.$charts.worldMap("worldmap");
      })
      .catch((error) => {
        console.log(error);
      });*/
    api.QQapi.getCity({})
      .then((res) => {
        console.log(res.data.data.provinceCompare);
        let Alldata = [];
        let Alldata1 = [];
        let result = res.data.data.provinceCompare;
        //处理result中的name，提取出来 54行--72行
        let keys = Object.keys(result);
        for (let i = 0; i < keys.length; i++) {
          let temp = {
            name: keys[i],
            value: "",
          };
          Alldata.push(temp);
        }
        Object.keys(result).forEach((key) => {
          let temp1 = {
            value: result[key].confirmAdd,
          };
          Alldata1.push(temp1);
        });
        for (let i = 0; i < Alldata.length; i++) {
          Alldata[i].value = Alldata1[i].value;
        }
        console.log(Alldata);
        this.$charts.chinaMap("chinamap", Alldata);
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style  scoped>
#chinamap {
  width: 100%;
  height: 350px;
}
</style>
